<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-page-header content="发货详情" @back="$router.back()" />
        </el-card>
        <!-- <el-card class="!border-none mb-4" shadow="never">
            <el-form
                class="mb-[-16px]"
                :model="queryParams"
                inline
            >
                <el-form-item label="订单号" prop="order_id">
                    <el-input class="w-[280px]" v-model="queryParams.order_id" clearable placeholder="请输入订单号" />
                </el-form-item>
                <el-form-item label="详情ID" prop="detail_id">
                    <el-input class="w-[280px]" v-model="queryParams.detail_id" clearable placeholder="请输入详情ID" />
                </el-form-item>
                <el-form-item label="发货ID" prop="fahuo_id">
                    <el-input class="w-[280px]" v-model="queryParams.fahuo_id" clearable placeholder="请输入发货ID" />
                </el-form-item>
                <el-form-item label="操作人" prop="douser">
                    <el-input class="w-[280px]" v-model="queryParams.douser" clearable placeholder="请输入操作人" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card> -->
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
       
            <el-button @click="printer" icon="Printer" type="primary">打印</el-button>
            <el-button @click="Preview" icon="Printer" type="warning">打印预览</el-button>
            <el-button @click="setup" icon="Printer" type="danger">打印设置</el-button>
            <el-button @click="CheckIsInstall" icon="Printer" type="info">检测打印控件</el-button>
            <div class="header">
                <span>收货单位：{{info.name}}</span>
                <span>{{info.create_time}}</span>
            </div>
         
            <div class="mt-4">
                <el-table :data="pager.lists" border @selection-change="handleSelectionChange">
                    <el-table-column label="品名" prop="name" align="center" show-overflow-tooltip />
                    <el-table-column label="规格" prop="guige" align="center" show-overflow-tooltip />
                    <el-table-column label="下单数量" prop="detail_num" align="center" show-overflow-tooltip />
                    <el-table-column label="发货数量" prop="num" align="center" show-overflow-tooltip />
                    <el-table-column label="单位" align="center" prop="unit">
                        <template #default="{ row }">
                            <dict-value :options="dictData.unit" :value="row.unit" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
      
    </div>
</template>

<script lang="ts" setup name="fahuoDetailLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiFahuoDetailLists} from '@/api/fahuo/detail'
import { apiFahuoDetail} from '@/api/fahuo/fahuo'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import {getLodop} from '@/utils/LodopFuncs'

const route = useRoute()

// 是否显示编辑框
const showEdit = ref(false)
var LODOP:any 

// 查询条件
const queryParams = reactive({
    order_id: route.query.order_id || '',
    detail_id: '',
    fahuo_id: route.query.id || '',
    douser: '',
    page_size:999
})
const Preview = async ()=>{
    printerdata()

    LODOP.PREVIEW();	
}
const setup = async ()=>{
    printerdata()
    LODOP.PRINT_SETUP();	
}

// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}
let info =reactive({
    name:'',
    create_time:'',
    douser:'',
    remark:''
})


// 获取字典数据
const { dictData } = useDictData('unit')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiFahuoDetailLists,
    params: queryParams
})
const getdetail = async ()=>{
    const data =await apiFahuoDetail({id:route.query.id})
    info.name=data.name
    info.create_time=timeFormat(data.create_time,'yyyy年mm月dd日')
    info.douser=data.douser
    info.remark=data.remark
}
const printer=()=>{
    printerdata()
    LODOP.PRINT_DESIGN();
    //LODOP.PRINTA();
}
const CheckIsInstall=()=>{
    try{ 
		      LODOP=getLodop(false,false); 
			if (LODOP.VERSION) {
				 if (LODOP.CVERSION)
				 alert("当前有WEB打印服务C-Lodop可用!"); 
				 else
				 alert("本机已成功安装了Lodop控件！\n 版本号:"); 

			};
		 }catch(err){ 
 		 } 
}
const printerdata = ()=>{
    LODOP=getLodop(false,false)
    LODOP.PRINT_INITA(10,10,762,533,"打印发货单");
    LODOP.SET_PRINT_STYLE("FontSize", 10);
    LODOP.SET_PRINT_STYLE("Bold", 1);

    LODOP.ADD_PRINT_TEXT(20, 10, 260, 30, info.name); //序列号
    LODOP.ADD_PRINT_TEXT(20, 500, 260, 30, info.create_time); //序列号
    pager.lists.map((item,idx)=>{
        LODOP.ADD_PRINT_TEXT((idx+1)*70, 10, 260, 30, item.name); //序列号
        LODOP.ADD_PRINT_TEXT((idx+1)*70, 200, 260, 30, item.guige); //序列号
        LODOP.ADD_PRINT_TEXT((idx+1)*70, 300, 160, 30, item.detail_num); //序列号
        LODOP.ADD_PRINT_TEXT((idx+1)*70, 400, 160, 30, item.num); //序列号
        LODOP.ADD_PRINT_TEXT((idx+1)*70, 500, 160, 30, item.unit); //序列号
    })
}
// 获取详情
const setFormData = async (row: Record<any, any>) => {
    if(row.fahuo){
        queryParams.order_id=row.id
    }
    if(row.lists){
        queryParams.fahuo_id=row.id
    }
    getLists()
}
getLists()
getdetail();
defineExpose({
    setFormData
})

</script>
<style scoped>
.header{display: flex;justify-content: space-between;padding:10px 0;}
</style>

